<html>

<style>
	table {
	  border-collapse: collapse;
	  border-spacing: none;
	  align:center;
	  }
	 
	  tr th{
		border-top:0;
		border-left:0;
		border-right:0;
		border-bottom: 2px solid;	
		text-align:left;
	  }

	thead th {
	  background-color: #F7BE81;
	  font-size: 12px;
	  font-family: sans-serif;
	 border:none; 
	  }

	tbody td {
	  font-size: 12px;  	 
	}

	tr th:first-child {
		  border-top-left-radius: 6px;
		  border-bottom-left-radius: 6px;	  
	}

	tr td:last-child,
	tr th:last-child {
	  border-top-right-radius: 6px;
	  border-bottom-right-radius: 6px;
	}

	label{
		font-weight:bold;
	}
</style>


 <div ng-app="myApp"> 
	<h3>STB-Customer Master </h3>
		<form  method="post" action=""> 		
		<table>
			<tr>
				<td><label>* Customer</label></td> <td>:</td>
				<td>					
					<input type="text" auto-complete ui-items="custarr" class="input-medium" ng-model="stbc.custname" capitalize/>		
				</td>
				
				<td><label>* STB ID</label></td> <td>:</td>
				<td>
					<input type="text" auto-complete ui-items="stbarr" class="input-medium" ng-model="stbc.stbno" ng-change="stbgiven()" ng-disabled="ed"/>
				</td>
				
				<td><label>Card number</label></td> <td>:</td>
				<td>
					<input type="text" class="input-medium" auto-complete ui-items="cardarr" ng-model="stbc.cardno" my-blur="cardgiven()" ng-disabled="ed"/>
				</td>
			</tr>
			<tr>
				<td><label>* Activation Date</label></td> <td>:</td>
				<td><input type="text" ng-model="stbc.actdt" class="input-medium" jqdatepicker></td>
				
				<!--<td><label>Termination Date</label></td> <td>:</td>
				<td><input type="text" ng-model="stbc.termdt" class="input-medium" jqdatepicker></td>-->
				
				<td><label>* Rate per Month</label></td> <td>:</td>
				<td><input type="text" ng-model="stbc.rpm" class="input-medium"></td>
			</tr></table>
			
			<span class="pagination pull-left" >
				<button ng-click="upd()"  class="btn btn-success" ng-disabled="!ed">Update</button> 
				<button ng-click="save()" class="btn btn-info" ng-disabled="ed">Save</button>
				<button href="#/cancel/" ng-click="cancel()" class="btn">Clear</button> 	
			</span>
			<span class="pagination pull-right" >Customer:
				<select ng-model="search2.custname" class="sel" style="width:270px,text-align: left;" >
					<option value=''>ALL Customers</option>
					<option ng-repeat="x in custarr">{{x}}</option>
				</select></span>
			<br><br>
			
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Sr. No.</th>
						<th>STB Number</th>
						<th>Card Number</th>
						<th>Customer</th>
						<th>Activation date</th>
						<th>Termination Date</th>
						<th>Rate per month</th>
						<th>Delete</th>
						<th>Edit</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in stbcust | exact:search2 | startFrom:currentPage*pageSize | limitTo:pageSize">
						<td>{{item.id}}</td>
						<td>{{item.stbno}}</td>
						<td>{{item.cardno}}</td>
						<td>{{item.custname}}</td>
						<td>{{item.actdt}}</td>
						<td>{{item.termdt}}</td>
						<td>{{item.rpm}}</td>
						<td><a ng-click="dlt(item.id)"> 
							<img src="glyphicons_bin.png" alt="Delete" width="15" height="15"/></td> 
                         <td><a ng-click="edit(item.id)"> 
							<img src="glyphicons_edit.png" alt="Edit" /></td>		
					</tr>
				</tbody>
				
				<tfoot>
    
      <td colspan="6">
		<span class="pagination pull-left" ><tt>Total Records: {{stbcust.length}}</tt>
        Current Page    {{currentPage+1}} of {{Math.ceil(stbcust.length/pageSize)}}</span>
         <span class="pagination pull-right">
           <ul>
        
          <button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> &#8592; Prev </button>
                    
           <li ng-repeat="n in range(stbcust.length)"
               ng-class="{active: n == currentPage}"
               ng-click="setPage()">
                <a href ng-bind="n + 1">1</a>
           </li> 
          
    <button class="btn btn-info" ng-disabled="currentPage >= stbcust.length/pageSize - 1" ng-click="currentPage=currentPage+1"> Next &#8594; </button>
   </li>
    </ul>
   </span>
   </td>
   </tfoot>
			</table>
		</form>
	</body>
</html>